<script setup lang="ts">
  import { defineAsyncComponent,reactive,ref,toRefs,onMounted,computed } from 'vue';
  import { toRaw } from "@vue/reactivity";
  import { Key } from '@/stores/auth';
  import { Session } from '@/utils/storage';
  import request from "@/utils/request";
  import {notify,confirm} from '@/utils/element';
  import { isAuth } from '@/utils/utils';
  import {exportExcel} from '@/utils/exportExcel';
  import printJS from 'print-js'

  const AddEdit=defineAsyncComponent(()=>import('@/views/hetongguanli/add-edit.vue'));
        const state=reactive({
          query:{
                                                                                hetongbianhao:'',
                                                    hetongmingcheng:'',
                                                    hetongleixing:'',
                                                    hetongzhuangtai:'',
                                                                                                                jiafanglianxiren:'',
                                                                                            yifanglianxiren:'',
                                                                                                                                                                                                        
    },
    page:{
      current:1,
      size:10,
      total:0
    },
          tableList:[],
    ids:[],
    isdel:true,
              sfshVisiable:false,
        formData:{},
      
        })
  const { query,tableList,page,isdel
                          ,sfshVisiable,
        formData
              } = {...toRefs(state)};


      


  //进入执行
  getDateList();
  //获取列表
  function getDateList(){
    const params={
      page: state.page.current,
      limit: state.page.size,
                            }


                                                            if (state.query.hetongbianhao != '' && state.query.hetongbianhao != undefined) {
              params['hetongbianhao'] = '%' + state.query.hetongbianhao + '%'
            }
                                      if (state.query.hetongmingcheng != '' && state.query.hetongmingcheng != undefined) {
              params['hetongmingcheng'] = '%' + state.query.hetongmingcheng + '%'
            }
                                      if (state.query.hetongleixing != '' && state.query.hetongleixing != undefined) {
              params['hetongleixing'] = '%' + state.query.hetongleixing + '%'
            }
                                      if (state.query.hetongzhuangtai != '' && state.query.hetongzhuangtai != undefined) {
              params['hetongzhuangtai'] = '%' + state.query.hetongzhuangtai + '%'
            }
                                                                                      if (state.query.jiafanglianxiren != '' && state.query.jiafanglianxiren != undefined) {
              params['jiafanglianxiren'] = '%' + state.query.jiafanglianxiren + '%'
            }
                                                                      if (state.query.yifanglianxiren != '' && state.query.yifanglianxiren != undefined) {
              params['yifanglianxiren'] = '%' + state.query.yifanglianxiren + '%'
            }
                                                                                                                                                                    request({
      url:'hetongguanli/page',
      method:'get',
      params
    }).then(({data})=>{

      state.page.total=data.total;
      state.tableList=data.list;
            })
  }
  //查询
  function handleQuery(){
    getDateList();
  }

  function download(file) {
    window.open(`${file}`)
  }

  //删除

  function handleDelete(row:any){

    request({
      url:`hetongguanli/delete`,
      method:'post',
      data:[row.id]
    }).then(({data})=>{
      notify("删除成功",{type:'success'});
      getDateList();

    })
  }

  const multipleSelection = ref<[]>([]);

  function handleSelectionChange(val:any){
    multipleSelection.value=val;
    const list=toRaw(multipleSelection.value)
    list.forEach((item)=>{
      state.ids.push(item.id);
    })

    if(list.length==0){
      state.ids=[];
      state.isdel=true
    }else{
      state.isdel=false
    }

  }


  function listdel(){
    const ids=toRaw(state.ids)
    request({
      url:`hetongguanli/delete`,
      method:'post',
      data:ids
    }).then(({data})=>{
      notify("删除成功",{type:'success'});
      getDateList();

    })
  }


  const users=Session.get(Key.userInfoKey);

  const editRef=ref();


      


  function add(){
    editRef.value.open('新增','add');
  }
  function handleEdit(row:any){
    editRef.value.open('修改','up',row);
  }

      
      function shDialog(row:any){
        state.sfshVisiable=true;
        state.formData=row;


      }

      function shHandler(){
        confirm("确认要审核吗？").then(()=>{

          request({
            url:'hetongguanli/update',
            method:'post',
            data:state.formData
          }).then((data)=>{
            state.sfshVisiable=false;
            notify("操作成功",{type:'success'});
            getDateList();
          })

        })
      }

      

      


      
      

</script>
<template>
    <el-card shadow="never">
        <template #header>
            <div class="card_header">
                <b>列表</b>
            </div>
        </template>
        <div class="layout-padding">
            <el-form inline :model="query" label-suffix=":">

                                                                                                            
                        <el-form-item label="合同编号"  prop="hetongbianhao">
                            <el-input v-model="query.hetongbianhao" maxlength="100" placeholder="请输入合同编号" clearable style="width: 200px;"/>
                        </el-form-item>
                                                        
                        <el-form-item label="合同名称"  prop="hetongmingcheng">
                            <el-input v-model="query.hetongmingcheng" maxlength="100" placeholder="请输入合同名称" clearable style="width: 200px;"/>
                        </el-form-item>
                                                        
                        <el-form-item label="合同类型"  prop="hetongleixing">
                            <el-input v-model="query.hetongleixing" maxlength="100" placeholder="请输入合同类型" clearable style="width: 200px;"/>
                        </el-form-item>
                                                        
                        <el-form-item label="合同状态"  prop="hetongzhuangtai">
                            <el-input v-model="query.hetongzhuangtai" maxlength="100" placeholder="请输入合同状态" clearable style="width: 200px;"/>
                        </el-form-item>
                                                                                                                                                                    
                        <el-form-item label="甲方联系人"  prop="jiafanglianxiren">
                            <el-input v-model="query.jiafanglianxiren" maxlength="100" placeholder="请输入甲方联系人" clearable style="width: 200px;"/>
                        </el-form-item>
                                                                                                                                
                        <el-form-item label="乙方联系人"  prop="yifanglianxiren">
                            <el-input v-model="query.yifanglianxiren" maxlength="100" placeholder="请输入乙方联系人" clearable style="width: 200px;"/>
                        </el-form-item>
                                                                                                                                                                                                                                                                                                                                                                                        <el-form-item>
                  <div class="button-container">
                    <el-button icon="ele-Search" @click="handleQuery()" class="button button-7">查询</el-button>
                    <el-button  class="button button-6" v-if="isAuth('hetongguanli','删除')" icon="ele-Delete" @click="listdel()" :disabled="isdel" type="danger">多选删除</el-button>
                    <el-button class="button button-8" v-if="isAuth('hetongguanli','新增')" icon="ele-Plus" type="success" @click="add()">新增</el-button>
                                                                                                          </div>

                </el-form-item>
            </el-form>



            <el-table
                ref="tableListRef"
                :data="tableList"
                :header-cell-style="{
            textAlign: 'center',
            height: '60px',
            background: '#1e3a8a',
            color: '#ffffff'
        }"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                stripe
                :row-style="{height:'80px'}"
                border
                highlight-current-row
                class="custom-table"
                    @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />



                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="hetongbianhao" label="合同编号">

                                    <template #default="{row}">
                                        {{row.hetongbianhao}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="hetongmingcheng" label="合同名称">

                                    <template #default="{row}">
                                        {{row.hetongmingcheng}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="hetongleixing" label="合同类型">

                                    <template #default="{row}">
                                        {{row.hetongleixing}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="hetongzhuangtai" label="合同状态">

                                    <template #default="{row}">
                                        {{row.hetongzhuangtai}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="qianshuriqi" label="签署日期">

                                    <template #default="{row}">
                                        {{row.qianshuriqi}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="shengxiaoriqi" label="生效日期">

                                    <template #default="{row}">
                                        {{row.shengxiaoriqi}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="zhongzhiriqi" label="终止日期">

                                    <template #default="{row}">
                                        {{row.zhongzhiriqi}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="jiafanglianxiren" label="甲方联系人">

                                    <template #default="{row}">
                                        {{row.jiafanglianxiren}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="jiafanglianxifangshi" label="甲方联系方式">

                                    <template #default="{row}">
                                        {{row.jiafanglianxifangshi}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="jiafangdizhi" label="甲方地址">

                                    <template #default="{row}">
                                        {{row.jiafangdizhi}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="yifanglianxiren" label="乙方联系人">

                                    <template #default="{row}">
                                        {{row.yifanglianxiren}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="yifanglianxifangshi" label="乙方联系方式">

                                    <template #default="{row}">
                                        {{row.yifanglianxifangshi}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="yifangdizhi" label="乙方地址">

                                    <template #default="{row}">
                                        {{row.yifangdizhi}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="hetongjine" label="合同金额">

                                    <template #default="{row}">
                                        {{row.hetongjine}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="weiyuezeren" label="违约责任">

                                    <template #default="{row}">
                                        {{row.weiyuezeren}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="jiaofushijian" label="交付时间">

                                    <template #default="{row}">
                                        {{row.jiaofushijian}}
                                    </template>

                                </el-table-column>

                                                                                                                                    
                            <el-table-column header-align="center"  align="center" prop="hetongwenjian" label="合同文件">

                                <template #default="{row}">
                                    <el-button type="text" size="small" @click="download(row.hetongwenjian)">
                                        下载
                                    </el-button>
                                </template>

                            </el-table-column>

                                                                                                                                                                    <el-table-column header-align="center"  align="center" prop="userid" label="用户id">

                                    <template #default="{row}">
                                        {{row.userid}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                
                                <el-table-column header-align="center"  align="center" prop="sfsh" label="审核状态">

                                    <template #default="{row}">
                                        <span style="margin-right:10px">{{row.sfsh=='是'?'通过':'未通过'}}</span>
                                    </template>

                                </el-table-column>
                                <el-table-column  v-if="isAuth('hetongguanli','审核')" header-align="center"  align="center" prop="sfsh" label="审核">

                                    <template #default="{row}">
                                        <el-button type="text" icon="el-icon-edit" size="small" @click="shDialog(row)">审核
                                        </el-button>
                                    </template>

                                </el-table-column>


                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="shhf" label="审核回复">

                                    <template #default="{row}">
                                        {{row.shhf}}
                                    </template>

                                </el-table-column>

                                                                                                        <el-table-column fixed="right" align="center" label="操作" width="400">
                    <template #default="{row}">
                                                <el-button class="button button-8" v-if="isAuth('hetongguanli','修改')" icon="ele-Edit" @click.stop="handleEdit(row)" type="warning">修改</el-button>
                        <el-popconfirm  v-if="isAuth('hetongguanli','删除')"  width="auto" @confirm="handleDelete(row)"  :title="`确定永久删除吗？`">
                            <template #reference>
                                <el-button class="button button-6" icon="ele-Delete" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>





                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <m-page :page="page" @pageChange="getDateList"/>

            <AddEdit ref="editRef" @refresh="getDateList"/>
        </div>
    </el-card>

    
        <el-dialog
                title="审核"
                v-model="sfshVisiable"
                width="50%">
            <el-form ref="form" :model="formData" label-width="80px">
                <el-form-item label="审核状态">
                    <el-select v-model="formData.sfsh" placeholder="审核状态">
                        <el-option label="通过" value="是"></el-option>
                        <el-option label="不通过" value="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input type="textarea" :rows="8" v-model="formData.shhf"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="shDialog">取 消</el-button>
        <el-button type="primary" @click="shHandler">确 定</el-button>
      </span>
        </el-dialog>

    

</template>

<style scoped>
  .button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
  }

  .button {
    padding: 0px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .button:hover {
    transform: scale(1.05);
  }

  /* 不同样式的按钮 */
  .button-6 {
    background: linear-gradient(45deg, #ff9a9e, #fad0c4);
    color: white;
  }

  .button-7 {
    background: linear-gradient(45deg, #a1c4fd, #c2e9fb);
    color: white;
  }

  .button-8 {
    background: linear-gradient(45deg, #84fab0, #8fd3f4);
    color: white;
  }
</style>
